<template>
  <div class="common-content">
    <div class="left-content">
      <img class="zjjy-img" src="/images/zjjy.png">
      <div class="df-ss w-full">
        <ul class="new-list flex-1">
          <li class="w-full" @click="$router.push('/tgxz')">
            <div class="flex-1 line-1 title" style="color: #ba1919">
              【投稿须知】
            </div>
            <p>{{ $TOOL.dateFormat(new Date(), 'YYYY-MM-DD') }}</p>
          </li>
          <li class="w-full" @click="handleDetails(item)" v-for="(item,index) in newsList" :key="item.title">
            <div class="flex-1 line-1 title">
              【{{ item.releaseYear }}年第{{ item.termNumber }}期】{{ $TOOL.richTextWithUrlsRemove(item.title) }}
            </div>
            <img v-if="index<3" class="new-img" src="/images/news.gif">
            <p>{{ $TOOL.dateFormat(item.createDate, 'YYYY-MM-DD') }}</p>
          </li>
          <li>
            <span></span>
            <a @click="$router.push('/expertsList')">更多>></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="right-content">
      <img src="/images/jktg.png">
      <el-link href="http://www.scnykj.cn/" target="_blank" style="display:block;">
        <img class="qk" src="/images/fm.jpg">
      </el-link>
    </div>
  </div>
</template>

<script setup>
import {homeApi} from "@/api";
import {useRouter} from "vue-router";

const infoList = [
  {
    title: '投稿邮箱',
    content: 'scnycxtd@yeah.net',
    icon: new URL('/images/icon1.png', import.meta.url).href
  },
  {
    title: '联系人：赵剑',
    content: '',
    icon: new URL('/images/icon2.png', import.meta.url).href
  },
  {
    title: '联系电话',
    content: '028-84504190',
    icon: new URL('/images/icon3.png', import.meta.url).href
  },
]
const newsList = ref([])
const show = ref(false)
onMounted(loadData)

async function loadData() {
  const res = await homeApi.expertAdvice.get()
  newsList.value = res || []
}

const router = useRouter()

function handleDetails(item) {
  router.push({
    path: '/details',
    query: {
      type: 2,
      id: item.id
    }
  })
}
</script>

<style scoped lang="scss">
.common-content {
  display: flex;
  margin-top: 40px;
  margin-bottom: 60px;
  gap: 60px;

  .left-content {
    width: 70%;

    .zjjy-img {
      width: 100%;
      margin-bottom: 64px;
    }

    .info-box {
      width: 237px;
      height: 333px;
      border: 1px solid $base-color;
      padding: 7px;

      .cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      ul {
        width: 100%;
        height: 100%;
        background: url("/images/bg1.png") no-repeat;
        padding: 7px;

        li {
          color: #FFFFFF;
          padding: 16px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 20px;
          border-bottom: 2px solid #3983BF;

          &:last-child {
            border-bottom: 0;
          }
        }
      }
    }

    .new-list {
      width: 400px;
      flex: 1;
      margin-left: 20px;
      margin-top: -20px;
      height: 350px;

      li {
        display: flex;
        padding: 20px 0;
        align-items: center;
        color: #333333;
        font-size: 22px;
        border-bottom: 1px solid #DBDBDB;
        justify-content: space-between;
        cursor: pointer;

        &:hover {
          color: $base-color;
        }

        &:last-child {
          border-bottom: none;
        }

        .title {
          max-width: 60%;
        }

        .new-img {
          display: block;
          margin-right: auto;
          width: 28px;
          height: 17px;
        }
      }
    }
  }

  .right-content {
    flex: 1;

    .qk {
      max-width: 300px;
      width: 100%;
      display: block;
      margin-top: 40px;
    }
  }
}
</style>
